建立內容

從網路誕生以來，建立內容一直是網路的核心。<textarea> 為大部分的網頁應用提供了原生且重要的解決方案，但有時候我們會需要為輸入的文本加上文字格式。這時 Rich Ediotr 的出現就派上用場了。目前有很多解決方案可以選擇，但 Quill 提供了一些現代的想法可供參考。

API 驅動設計 (API Driven Design)

Rich editor 的目的是協助使用者撰寫文本。但大多數的 rich editor 都不知道使用者寫了什麼文本。什麼意思呢? 就是說編輯器與 Web 開發者一樣是透過 DOM (Document Object Model) 的視角來查看內容。這樣的方式會出現一些阻礙，因為 DOM 是以非平衡樹 (Unbalanced Tree) 的節點組合而成，而文本則是由行、單詞與字符所構成。

沒有任何一個 DON API 是以字元為測量單位。也因為這樣的限制，大部分的 rich editor 無法回答出類似這樣的簡單問題：「這個範圍的文本是什麼?」 或「目前游標是否停在粗體的文字上?」DOM 與文本兩者的基礎結構不一致，造成開發者在嘗試提供更豐富且直覺的文本編輯體驗時面臨到的困難和挑戰。

Quill 專為編輯和字符而設計，並在這些基於自然文本為中心單位上開發了 API。要確定某些內容是否為粗體，Quill 不需要遍歷 DOM 來查找 <b> 或 <strong> 節點或字體粗細樣式屬性 - 只需呼叫 getFormat(5, 1)。其中所有核心 API 呼叫都允許使用任意索引 (index) 和長度 (length) 進行訪問或修改。其事件 API(Event API) 也以直觀的 JSON 格式回報變更的內容。不需要解析 HTML 或比對 DOM Tree。

自定義內容與格式化

在不久前，評估 rich editor 很簡單，只需比較它支援了多少種格式。雖然這是一個重要的評估指標，但隨著需求的增加，這個下限正在趨近於無限大。簡單來說就是坑越來越深了。

文本的撰寫不再只是為了列印出來，如今也能渲染在網頁上。這是一個比紙更豐富的平台。內容可以是即時的、有互動的，可協作的。甚至有些 rich editor 支援如圖片和影片等媒體來豐富文本內容，但幾乎沒有可以像嵌入推文 (tweet )或互動圖表的。然而，這正是網路正在發展的方向：更豐富且可互動的內容。因此，這些建立內容的工具就需要考慮到這些使用案例。

Quill 提供了自己的文件模型 (document model)，這是比 DOM 還要強大的抽象方式，允許進行擴充和自訂。Quill 可以支援的格式和內容幾乎是沒有限制的。使用者已經使用它來加入嵌入式幻燈片、互動式待辦事項清單甚至是 3D 模型。

跨平台

對很多 JavaScript 函式庫來說，跨平台支援是很重要的。但這個具體的概念也常因為函式庫的不同而有所差異。對 Quill 來說，它的標準不僅僅是能正常運作這麼簡單，無論是功能實現上要考慮跨平台的支援，或是使用者與開發者的體驗也必須是一致的。

舉例來說：

• 如果在 OSX 上的 Chrome 瀏覽器中某些內容會產生特定的標記，那麼在 IE 上也應該產生相同的標記。(OS：還好目前的工作只需要專注在 chrome...)
• 如果在 Windows 上的 Firefox 瀏覽器中按下 Enter 鍵能保留文字加粗的格式，那麼在 Mobile 的 Safari 上也應該能保留。

易於使用

上述的所有好處就集中在這個容易使用的 package 中。Quill 附帶了合理的預設配置，只需要幾行 JavaScript 程式碼，你就可以立即享用：

const quill = new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
});

Quill 已經為你提供了一個豐富且一致的使用體驗，這個體驗是“開箱即用”的。如果你的需求完全符合 Quill 預設提供的功能，且不需要額外自訂功能，那麼你只需安裝和使用它，不必進行任何額外的設定或開發。

當然我是因為有很多大量的客製需求，所以才開始跳入這個坑的，明天就來練習一下，如何建立一個 Angular 專案，並把 Quill 加進去。

小結

Quill 是一個現代化的富文本編輯器，提供了基於自然文本的 API，讓開發者更容易操作和獲取文本資訊。它支援高度自定義和擴展，以適應多變和複雜的需求。同時，Quill 也重視跨平台的一致性和使用者體驗。Quill 的初始設置非常簡單，可謂是"開箱即用"的解決方案。

雜記：

前天跟隊友一起去吃飯，正在等候叫位的時候，來了一對老夫婦，老太太說這兩個人中間有個小孩，應該是吧? 朝著他們看的方向看了一下，原來是廁所的 icon，內心想：這對老夫婦大概是剛才錯把電梯的 icon 當成廁所了。這麼說，以前好像也滿常在三創把廁所跟電梯的 icon 給搞混的。平常還好，但 O 在滾的時候可是很要命的，再次體會到 UI/UX 的重要性 XD

Reference

• Why Quill - Quill Rich Text Editor (quilljs.com)